<!DOCTYPE html>
<html>

<head>
    <title>Examples Easy Silder</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="jquery.easy_slides.css" rel="stylesheet" type="text/css" />
    <script src="easy_slides.js"></script>
</head>

<body>
    <h1>Examples Easy Silder</h1>

    <section>
        <h2>One Big Picture</h2>
        <div class="slider slider_one_big_picture">
            <div>
                <img src="https://image.freepik.com/free-photo/rain-water-green-leaf-macro_1150-12802.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/green-leaf-forest_1150-12333.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/old-wooden-fence-beautiful-mountain-landscape-blue-sky_181624-41984.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/mesmerizing-view-plitvice-lakes-national-park-croatia_181624-31820.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/countryside-field-sunny-day-countryside_181624-24010.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/plant-alpine-meadow-pyrenees_1398-3219.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/beautiful-landscape-bamboo-grove-forest-arashiyama-kyoto_74190-2264.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/overhead-aerial-shot-wavy-blue-sea-perfect-background_181624-26817.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/european-hamster-flowering-meadow_475641-322.jpg">
            </div>
            <div class="next_button"></div>
            <div class="prev_button"></div>
            <div class="nav_indicators"></div>
        </div>
        <script>
                EasySlides('.slider_one_big_picture',
                {
                    'autoplay': true,
                    'stepbystep': false,
                    'show': 5,
                    'loop': false
                });
        </script>
    </section>

    <section>
        <h2>One Big 2</h2>
        <div class="slider slider_one_big_2">
            <div>
                <img src="https://image.freepik.com/free-photo/rain-water-green-leaf-macro_1150-12802.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/green-leaf-forest_1150-12333.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/old-wooden-fence-beautiful-mountain-landscape-blue-sky_181624-41984.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/mesmerizing-view-plitvice-lakes-national-park-croatia_181624-31820.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/countryside-field-sunny-day-countryside_181624-24010.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/plant-alpine-meadow-pyrenees_1398-3219.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/beautiful-landscape-bamboo-grove-forest-arashiyama-kyoto_74190-2264.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/overhead-aerial-shot-wavy-blue-sea-perfect-background_181624-26817.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/european-hamster-flowering-meadow_475641-322.jpg">
            </div>
            <div class="nav_indicators"></div>
        </div>
        <script>
            EasySlides('.slider_one_big_2',
            {
                    'autoplay': false,
                    'stepbystep': true,
                    'show': 5,
                    'loop': false
            });
        </script>
    </section>

    <section>
        <h2>Circle</h2>
        <div class="slider slider_circle_10">
            <div>
                <img src="https://image.freepik.com/free-photo/rain-water-green-leaf-macro_1150-12802.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/green-leaf-forest_1150-12333.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/old-wooden-fence-beautiful-mountain-landscape-blue-sky_181624-41984.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/mesmerizing-view-plitvice-lakes-national-park-croatia_181624-31820.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/countryside-field-sunny-day-countryside_181624-24010.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/plant-alpine-meadow-pyrenees_1398-3219.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/beautiful-landscape-bamboo-grove-forest-arashiyama-kyoto_74190-2264.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/overhead-aerial-shot-wavy-blue-sea-perfect-background_181624-26817.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/european-hamster-flowering-meadow_475641-322.jpg">
            </div>
            <div class="next_button"></div>
            <div class="prev_button"></div>
        </div>
        <script>
                EasySlides('.slider_circle_10',{
                    'autoplay': true,
                    'show': 13
                });
        </script>
    </section>

    <section>
        <h2>4 in line</h2>
        <div class="slider slider_four_in_line">
            <div>
                <img src="https://image.freepik.com/free-photo/rain-water-green-leaf-macro_1150-12802.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/green-leaf-forest_1150-12333.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/old-wooden-fence-beautiful-mountain-landscape-blue-sky_181624-41984.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/mesmerizing-view-plitvice-lakes-national-park-croatia_181624-31820.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/countryside-field-sunny-day-countryside_181624-24010.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/plant-alpine-meadow-pyrenees_1398-3219.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/beautiful-landscape-bamboo-grove-forest-arashiyama-kyoto_74190-2264.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/overhead-aerial-shot-wavy-blue-sea-perfect-background_181624-26817.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/european-hamster-flowering-meadow_475641-322.jpg">
            </div>
            <div class="next_button"></div>
            <div class="prev_button"></div>
        </div>
        <script>
                EasySlides('.slider_four_in_line',
                {
                    'autoplay': true,
                    'show': 9
                })
        </script>
    </section>

    <section>
        <h2>Clock</h2>
        <div class="slider slider_clock">
            <div>
                <img src="https://image.freepik.com/free-photo/rain-water-green-leaf-macro_1150-12802.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/green-leaf-forest_1150-12333.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/old-wooden-fence-beautiful-mountain-landscape-blue-sky_181624-41984.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/mesmerizing-view-plitvice-lakes-national-park-croatia_181624-31820.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/countryside-field-sunny-day-countryside_181624-24010.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/plant-alpine-meadow-pyrenees_1398-3219.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/beautiful-landscape-bamboo-grove-forest-arashiyama-kyoto_74190-2264.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/overhead-aerial-shot-wavy-blue-sea-perfect-background_181624-26817.jpg">
            </div>
            <div>
                <img src="https://image.freepik.com/free-photo/european-hamster-flowering-meadow_475641-322.jpg">
            </div>
            <div class="next_button"></div>
            <div class="prev_button"></div>
        </div>
        <script>
                EasySlides('.slider_clock',
                {
                     'autoplay': true,
                     'stepbystep': false,
                     'show': 15
                 })
         </script>
    </section>

    <section>
        <h2>Random place</h2>
        <div class="slider_random_place">
            <div class="slider slider_random">
                <div>
                    <img src="https://image.freepik.com/free-photo/rain-water-green-leaf-macro_1150-12802.jpg">
                </div>
                <div>
                    <img src="https://image.freepik.com/free-photo/green-leaf-forest_1150-12333.jpg">
                </div>
                <div>
                    <img src="https://image.freepik.com/free-photo/old-wooden-fence-beautiful-mountain-landscape-blue-sky_181624-41984.jpg">
                </div>
                <div>
                    <img src="https://image.freepik.com/free-photo/mesmerizing-view-plitvice-lakes-national-park-croatia_181624-31820.jpg">
                </div>
                <div>
                    <img src="https://image.freepik.com/free-photo/countryside-field-sunny-day-countryside_181624-24010.jpg">
                </div>
                <div>
                    <img src="https://image.freepik.com/free-photo/plant-alpine-meadow-pyrenees_1398-3219.jpg">
                </div>
                <div>
                    <img src="https://image.freepik.com/free-photo/beautiful-landscape-bamboo-grove-forest-arashiyama-kyoto_74190-2264.jpg">
                </div>
                <div>
                    <img src="https://image.freepik.com/free-photo/overhead-aerial-shot-wavy-blue-sea-perfect-background_181624-26817.jpg">
                </div>
                <div>
                    <img src="https://image.freepik.com/free-photo/european-hamster-flowering-meadow_475641-322.jpg">
                </div>
                <div class="next_button"></div>
                <div class="prev_button"></div>
            </div>
        </div>
        <script>
                EasySlides('.slider_random',
                {
                    'autoplay': true,
                    'stepbystep': false,
                    'show': 'all',
                    'beforeshow': function (this_slider) {
                        const slides = this_slider.querySelectorAll(':scope>*:not(.next_button, .prev_button, .nav_indicators)');
                        slides.forEach(function (element, index) {
                            let x = element.dataset.x;
                            let y = element.dataset.y;
                            let r = element.dataset.r;

                            if (typeof x == 'undefined') {
                                x = (100 / slides.length) * index;
                                element.dataset.x = x;
                            }
                            if (typeof y == 'undefined') {
                                y = Math.floor(Math.random() * 25) + 70;
                                element.dataset.y = y;
                            }
                            if (typeof r == 'undefined') {
                                r = Math.floor(Math.random() * 180) - 90;
                                element.dataset.r = r;
                            }

                            element.style.left = x+'%';
                            element.style.top = y+'%';
                            element.style.transform = 'rotate('+r+'deg)';
                        });
                    },
                    'aftershow': function (this_slider) {
                        const slides = this_slider.querySelectorAll(':scope>*:not(.next_button, .prev_button, .nav_indicators)');
                        slides.forEach(function (element, index) {
                            if (element.classList.contains('active')) {
                                element.style.left = '';
                                element.style.top = '';
                                element.style.transform = '';
                            }
                        });
                    }
                 })
         </script>
    </section>

</body>

</html>